<template>
	<pagehead :isActive="1"></pagehead>
	<view class="content">
		<view class="detail">
			<view class="detail_img">
				<image class="main_img" :src="'/static/big'+imgnum+'.jpg'" mode="aspectFit"></image>
			</view>
			<view class="detail_img">
				<image class="qr_img" :src="'/static/qr'+imgnum+'.png'" mode="aspectFit"></image>
			</view>
			<view class="detail_txt">
				<span>欢迎扫码体验</span>
			</view>
		</view>
	</view>
	<pagefoot></pagefoot>
</template>

<script>
	let landscapeOb;
	export default {
		data() {
			return {
				imgnum:1,
				isphone:false
			}
		},
		onShow() {
			if(this.isphone){
				uni.redirectTo({
					url:"/pages/index/index"
				})
				return;
			}
			this.imgnum = getApp().globalData.imgnum
		},
		mounted(){
			this.checkPhoneview();
		},
		methods: {
			checkPhoneview(){
				landscapeOb = uni.createMediaQueryObserver(this)
				landscapeOb.observe({
				    orientation: 'landscape'
				}, matches => {
				        this.isphone = !matches
				})
			},
			destroyed () {
			     landscapeOb.disconnect()
			},
		}
	}
</script>

<style scoped lang="less">
	@import url('../../public/css/public.less');
	.content{
		.detail{
			display: flex;
			flex-direction: column;
			justify-content: top;
			align-items: center;
			background-color: rgba(122, 122, 122, 0.5);
			.detail_img, .detail_txt{
				padding-top: 80rpx;
				.qr_img{
					width: 300rpx;
					height: 300rpx;
					padding-top: 80rpx;
				}
			}
		}
	}
</style>
